<template>
    <div class="editor-container">
        <el-dialog title="创建课程" :visible.sync="createCourseDialogVisible">
            <el-tabs v-model="createCourseTab">
                <el-tab-pane label="创建技能" name="create">
                    <course-create-form @complete="handleCreateCourse"></course-create-form>
                </el-tab-pane>
                <el-tab-pane label="引用技能" name="attach">
                    <skill-course-attach-form :skill-id="skillId"
                                              :errors="attachCourseErrors"
                                              @complete="onSubmitAttachCourse"></skill-course-attach-form>

                </el-tab-pane>
            </el-tabs>

        </el-dialog>
        <el-dialog title="编辑课程" :visible.sync="editCourseDialogVisible">
            <el-tabs v-model="editCourseDialogActiveName">
                <el-tab-pane label="课程信息" name="course">
                    <course-edit-form @complete="handleEditCourseComplete" :course-id="focusNodeId"
                                      v-if="focusNodeId"></course-edit-form>
                </el-tab-pane>
                <!--<el-tab-pane label="本节点信息" name="node">-->
                <!--<skill-course-edit-form :course-id="focusNodeId" :skill-id="skillId"-->
                <!--v-if="focusNodeId"></skill-course-edit-form>-->
                <!--</el-tab-pane>-->
                <el-tab-pane label="关联节点" name="relation-node">
                    <skill-course-relation :skill-id="skillId" :course-id="focusNodeId"
                                           v-if="focusNodeId" @complete="completeLink"
                                           @detach="completeLink"></skill-course-relation>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

        <editor-edge v-for="edge in edges" :key="'edge-'+edge.node_id"
                     :edge="edge"></editor-edge>

        <div class="step" v-for="(step,index) in steps" :key="index" ref="editor-step">
            <div class="step-num">{{index+1 }}</div>
            <div class="box box-normal" v-for="(course,i) in step" :key="'node-'+i" :data-step="index"
                 :data-node="course.id" @click="focusNode(course.id)"
                 :class="{focus:course.id===focusNodeId}"
                 ref="editor-node">
                <div class="fixed-bottom">
                    <el-button-group>
                        <el-button size="mini" icon="el-icon-caret-top" @click="nodeAddStep(course.id)"></el-button>
                        <el-button size="mini" icon="el-icon-caret-bottom"
                                   @click="nodeDecreaseStep(course.id)"></el-button>
                        <el-button size="mini" icon="el-icon-edit"
                                   @click="editNode"></el-button>
                        <el-button size="mini" icon="el-icon-delete" @click="deleteNode(course.id)"></el-button>
                    </el-button-group>
                </div>
                <span class="node-text">{{course.id}} {{course.title}}</span>
            </div>
            <el-button class="box button-new-tag" size="small" @click="addCourse(index)" icon="el-icon-plus">添加课程
            </el-button>
        </div>

        <el-button class="step add" shadow="hover" @click="addNewStep" icon="el-icon-plus">
            添加
        </el-button>

    </div>

</template>

<script>
    import EditorEdge from "./EditorEdge";
    import GraphicMixin from "../mixins/GraphicMixin";
    import CourseCreateForm from "./CourseCreateForm";
    import CourseEditForm from "./CourseEditForm";
    import SkillCourseRelation from "./SkillCourseRelation";
    import SkillCourseAttachForm from "./SkillCourseAttachForm";

    export default {
        props: {skillId: {type: Number, required: true}},
        components: {EditorEdge, CourseCreateForm, CourseEditForm, SkillCourseRelation, SkillCourseAttachForm},
        mixins: [GraphicMixin],
        data() {
            return {
                createCourseDialogVisible: false,
                createCourseTab: 'create',
                editCourseDialogVisible: false,
                editCourseDialogActiveName: 'course',
                currentStep: 0,
                list: [],
                nextNodeKey: 'next_course_id',
                attachSkillId: null,
                attachCourseErrors: {},
                copyCourseErrors: {}
            }
        }, methods: {
            getSkillCourses() {
                axios.get('skills/' + this.skillId + '/courses').then((response) => {
                    this.list = response.data.data;
                    this.refreshGraphic();
                });
            }, addNewStep() {
                this.addCourse(this.steps.length)
            }, addCourse(step) {
                this.currentStep = step;
                this.createCourseDialogVisible = true;
            }, linkToOtherNode(ids) {
                axios.put('skills/' + this.skillId + '/courses/' + this.focusNodeId, {
                    next_course_id: ids
                }).then(() => {
                    this.getSkillCourses();
                    this.focusNodeId = null;
                }).catch(() => {
                    this.focusNodeId = null;
                });
            }, nodeUpdate(node) {
                axios.put('skills/' + this.skillId + '/courses/' + node.id, node.pivot).then(() => {
                    this.refreshGraphic();
                });
            }, nodeAddStep(id) {
                let temp = this.find(id);
                if (temp.pivot.step > 0) {
                    temp.pivot.step--;
                    this.nodeUpdate(temp);
                }
            }, nodeDecreaseStep(id) {
                let temp = this.find(id);
                temp.pivot.step++;
                this.nodeUpdate(temp);
            }, handleCreateCourse(course) {

                course.pivot = {
                    step: this.currentStep,
                    course_id: course.id,
                    skill_id: this.skillId,
                    next_skill_id: []
                };
                this._attachCourse(course)
            }, _attachCourse(course) {
                axios.post('skills/' + this.skillId + '/courses/' + course.id, course.pivot).then(() => {
                    this.getSkillCourses();
                    this.createCourseDialogVisible = false;
                })
            }, editNode() {
                this.editCourseDialogVisible = true;
            }, deleteNode(id) {
                this.$confirm('此操作将删除该技能, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.delete('skills/' + this.skillId + '/courses/' + id).then(() => {
                        this.$message.success('删除成功!');
                        this.getSkillCourses();
                    });

                });
            }, onSubmitAttachCourse(form) {
                console.log(form)
                this.createSkillDialogVisible = false;
                this._attachCourse(form);
            }, onSubmitCopySkill(form) {
                console.log(form)
                this.createSkillDialogVisible = false;
            }, handleEditCourseComplete() {

            }, completeLink() {
                this.getSkillCourses();
            }
        }, created() {
            this.getSkillCourses();
        }
    }
</script>

<style scoped>

</style>